import { Form, Input, Button } from 'antd'
import { css } from '@emotion/css'
import { useDispatch, useSelector } from 'umi'
import vio from '@/assets/video/bg.mp4';
import { IState } from './model';
const Login = () => {
  const dispatch = useDispatch();
  const { token } = useSelector<{ login: IState }, { token: string }>((state) => ({ token: state.login.token }))
  const [form] = Form.useForm()

  const onFinish = (values: any) => {
    console.log('Success:', values);
    console.log('Success:', token);
    dispatch({ type: 'login/login', payload: { ...values } })
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onReset = () => {
    form.resetFields();
  }
  return (
    <div className={css`
      position: relative;
      background-color: #1a5c91;
      height: 100vh;
      .bg {
        position: absolute;
        z-index: 1;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        video {
          width: 100%;
          height: 100%;
        }
      }
      .form-box{
        position: relative;
        z-index: 9;
        transform: translateY(-50%);
        top: 40vh;
        width: 400px;
        margin: auto;
      }
      .form-box-bg{
        position: absolute;
        filter: blur(2px);
        opacity: 0.2;
        background-color: rgb(26 92 145);
        width: 440px;
        height: 254px;
        margin-top: -60px;
        margin-left: -20px;
      }
      .login-form {
       
      }
      .ant-form-item-explain-error{
        color: #1a5c91;
      }
      .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{
        border-color: #1a5c91;
      }
      .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input{
        border-color: #1a5c91;
      }
      .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{
        color: #1a5c91;
      }
    `}>
      <div className='bg'>
        <video loop muted autoPlay>
          {/* 没静音就不能自动播放 muted属性*/}
          <source src={vio} type="video/mp4" />
        </video>
      </div>
      <div className='form-box'>
        <div className='form-box-bg'></div>
        <Form
          className='login-form'
          form={form}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item label="账号" name='account' rules={[{ required: true, message: 'Please input your username!' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="密码" name='password' rules={[{ required: true, message: 'Please input your password!' }]}>
            <Input.Password></Input.Password>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 14 }}>
            <Button style={{ marginTop: '16px', backgroundColor: 'rgb(76 112 156)' }} type="primary" htmlType="submit">
              Submit
            </Button>
            <Button style={{ marginTop: '16px', backgroundColor: 'rgb(76 112 156)' }} type="primary" htmlType="submit" onClick={onReset}>
              Reset
            </Button>

          </Form.Item>
        </Form>
      </div>

    </div >
  )
}


export default Login

